<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Análisis y Diseño 2</title>
        <meta name="description" content="A responsive folded flyer-like restaurant menu with some 3D" />
        <meta name="keywords" content="css3, perspective, 3d, jquery, transform3d, responsive, template, restaurant, menu, leaflet, folded, flyer, concept" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="/public/css/style.css" />
		<link href='http://fonts.googleapis.com/css?family=Raleway:300,500|Arvo:700' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="/public/js/modernizr.custom.79639.js"></script> 
		<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <span class="right">
                	<a href="/Security/registro">Registrarme</a>
                    <a href="/">
                        <strong>Menú</strong>
                    </a>
                </span>
            </div><!--/ Codrops top bar -->
			
			<header>
				
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<span class="no-cssanimations">CSS animations are not supported in your browser</span>
					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
					<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main">

				<div id="rm-container" class="rm-container">

					<div class="rm-wrapper">

						<div class="rm-cover">

							<div class="rm-front">
								<div class="rm-content">

									<div class="rm-logo"></div>
									<h2>Pizzas Gourmet</h2>
									<h3>Mi Orden</h3>

									<table border="1" width="100%">
										<thead>
											<th>Producto</th>
											<th>Descripcion</th>
											<th>Precio</th>
										</thead>
										<tbody>
											#{list items:ordenActiva?.pizzas, as:'pizza'}
												<tr>
													<td>Pizza</td>
													<td>${pizza.nombre}</td>
													<td>Q. ${pizza.precio?.format("#.00")}</td>

												</tr>
											#{/list}
											#{list items:ordenActiva?.complementos, as:'complemento'}
												<tr>
													<td>${complemento.tipo}</td>
													<td>${complemento.nombre}</td>
													<td>Q. ${complemento.precio?.format("#.00")}</td>

												</tr>
											#{/list}
												<tr>
													<td></td>
													<td align="right">Total:</td>
													<td>Q. ${ordenActiva?.total?.format("#.00")}</td>
												</tr>
										</tbody>
									</table>

									<br>	
									<div align="center"><a href="/procesar">procesar</a></div>
									<p style="color:red">${flash.error}</p>
								</div><!-- /rm-content -->
							</div><!-- /rm-front -->


						</div><!-- /rm-cover -->

					</div><!-- /rm-wrapper -->

				</div><!-- /rm-container -->

			</section>
			
        </div>
		<!-- jQuery if needed -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="/public/js/menu.js"></script>
		<script type="text/javascript">
			$(function() {

				Menu.init();
			
			});
		</script>
    </body>
</html>
